<template>
  <div class="mt16 ml20">
    <div class="mb20">
      <el-button size="small" @click="specsFunc">添加规格</el-button>
    </div>
    <div v-if="form.spec_list && form.spec_list.length > 0">
      <div>
        批量设置
        <el-input
          size="small"
          v-model="batchData.assemble_price"
          placeholder="拼团单价"
          style="width: 160px; padding-left: 4px"
        ></el-input>
        <el-input
          size="small"
          v-model="batchData.assemble_stock"
          placeholder="拼团库存"
          style="width: 160px; padding-left: 4px"
        ></el-input>
        <el-button size="small" @click="onSubmitBatchData">应用</el-button>
      </div>
      <!--多规格表格-->
      <div>
        <el-table
          size="mini"
          :data="form.spec_list"
          border
          style="width: 100%; margin-top: 20px"
        >
          <el-table-column label="规格名称">
            <template slot-scope="scope">
              {{ scope.row.product_attr }}
            </template>
          </el-table-column>
          <el-table-column label="规格图片">
            <template slot-scope="scope">
              <img
                :src="(`${scope.row.product_cover}`)"
                alt=""
                width="35"
                height="35"
                @click="chooseSpecImage(scope.$index)"
              />
            </template>
          </el-table-column>
          <el-table-column label="销售单价">
            <template slot-scope="scope">
              <el-form-item label="" style="margin-bottom: 0"
                ><el-input
                  size="small"
                  prop="product_price"
                  v-model="scope.row.product_price"
                ></el-input
              ></el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="拼团单价">
            <template slot-scope="scope">
              <el-form-item
                label=""
                :rules="[{ required: true, message: ' ' }]"
                :prop="'spec_list.' + scope.$index + '.assemble_price'"
                style="margin-bottom: 0"
              >
                <el-input
                  size="small"
                  prop="assemble_price"
                  v-model="scope.row.assemble_price"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column label="拼团库存">
            <template slot-scope="scope">
              <el-form-item
                label=""
                :rules="[{ required: true, message: ' ' }]"
                :prop="'spec_list.' + scope.$index + '.assemble_stock'"
                style="margin-bottom: 0"
              >
                <el-input
                  size="small"
                  prop="assemble_stock"
                  v-model="scope.row.assemble_stock"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!--上传图片组件-->
    <Upload v-if="isupload" :isupload="isupload" @returnImgs="returnImgsFunc"
      >上传图片</Upload
    >
    <!--规格选择-->
    <Specs
      :isspecs="isspecs"
      :productId="form.model.product_id"
      :excludeIds="SpecExcludeIds"
      :islist="true"
      @close="closeSpecs"
    ></Specs>
  </div>
</template>

<script>
import Upload from '@/components/file/Upload';
import Specs from "@/components/product/Specs.vue";
export default {
  components: {
    Upload,
    Specs,
  },
  data() {
    return {
      /*批量设置sku属性*/
      batchData: {
        assemble_price: "",
        assemble_stock: "",
      },
      isspecs:false,
      specType: false,
      SpecExcludeIds: [],
      /*图片是否打开*/
      isupload: false,
      //上传图片选择的下标
      spec_index: -1,
    };
  },
  inject: ["form"],
  created() {},
  methods: {
    /*批量设置sku属性*/
    onSubmitBatchData: function () {
      var self = this;
      self.form.spec_list.forEach(function (value) {
        for (var key in self.batchData) {
          if (self.batchData.hasOwnProperty(key) && self.batchData[key]) {
            self.$set(value.spec_form, key, self.batchData[key]);
          }
        }
      });
    },

    /*选择图片*/
    chooseSpecImage: function (spec_index) {
      this.isupload = true;
      this.spec_index = spec_index;
    },

    /*返回图片*/
    returnImgsFunc(e) {
      this.isupload = false;
      console.log(e);
      // this.$set(
      //   this.form.model.spec_many[this.spec_index].spec_form,
      //   "image_id",
      //   e[0]["file_id"]
      // );
      this.$set(
        this.form.spec_list[this.spec_index],
        "product_cover",
        e[0]["file_path"]
      );
    },
    /*打开规格*/
    specsFunc(i, e, type) {
      let arr = [];

      if (type) {
        this.specType = true;
        arr.push(this.form.model.product_sku_id);
        // this.form.tableData.forEach(item => {
        //   if (this.curProduct.product_id == item.product_id) {

        //   }
        // });
      } else {
        this.specType = false;
      }
      this.SpecExcludeIds = arr;
      this.isspecs = true;
    },
    /*关闭规格*/
    closeSpecs(e) {
      this.isspecs = false;
      // console.log(e);
      if (e.type == 'success') {
        let arr = [];
        for (let i = 0; i < e.params.length; i++) {
          let item = e.params[i];
          let obj = {
            // assemble_product_id: this.form.model.assemble_product_id,
            product_id: this.form.model.product_id,
            product_sku_id: item.product_sku_id,
            assemble_activity_id: 0,
            assemble_stock: item.spec_form.stock_num,
            assemble_price: item.spec_form.product_price,
            product_attr: item.spec_name,
            product_cover: item.spec_form.image_path,
            product_price: item.spec_form.product_price
          };
          arr.push(obj);
        }

        // let params = [this.curIndex, this.specType ? 0 : 1].concat(arr);

        // this.form.tableData.splice(...params);
        this.form.spec_list = this.form.spec_list.concat(arr);
        // console.log('model', this.form.model );
        // this.form.tableData = mergeTable(this.form.tableData);
      }
    },
    
  },
};
</script>

<style>
</style>
